<template>
  <div id="home-carousel">
    <!-- HERO UNIT -->
    <section class="hero-unit-slider slider-responsive no-margin">
      <el-carousel height="350px">
        <el-carousel-item v-for="item in items" :key="item.id">
          <img :src="item.img" class="img-responsive" alt="Slider Image">
          <div class="carousel-caption">
            <h2 class="hero-heading">{{item.heading}}</h2>
            <p class="lead">{{item.lead}}</p>
            <a :href="item.go" class="btn btn-lg hero-button">LEARN MORE</a>
          </div>
        </el-carousel-item>
      </el-carousel>
    </section>
    <!-- END HERO UNIT -->
  </div>
</template>

<script>
const img1 = require("@/assets/img/sliders/slider1-h500.png");
const img2 = require("@/assets/img/sliders/slider2-h500.png");
const img3 = require("@/assets/img/sliders/slider3-h500.png");
export default {
  data() {
    return {
      items: [
        {
          id: 0,
          img: img1,
          heading: "EASY TO CUSTOMIZE",
          lead: "Readable code, well documented and FREE support",
          go: "#"
        },
        {
          id: 1,
          img: img2,
          heading: "EASY TO CUSTOMIZE",
          lead: "Readable code, well documented and FREE support",
          go: "#"
        },
        {
          id: 2,
          img: img3,
          heading: "EASY TO CUSTOMIZE",
          lead: "Readable code, well documented and FREE support",
          go: "#"
        }
      ]
    };
  },
  created() {
    console.log(this.items);
  }
};
</script>

<style lang="less">
#home-carousel {
  margin-bottom: 60px;
}
</style>
